<template>
  <div>
    <a-card class="contentFullHeight"  :bodyStyle="{padding : '10px 10px'}">
      <div class="">
        <a-card :bordered="true" class="searchBox" :bodyStyle="{padding : '10px 24px'}">
          <a-form layout="inline">

            <a-form-item label="用户姓名">
              <a-input v-model="searchParams.userName"></a-input>
            </a-form-item>

            <a-form-item >
              <a-button type="primary" icon="search" @click="handleSearch">查询</a-button>
            </a-form-item>
            <a-form-item>
              <a-button type="primary" icon="file" :loading="downloadLoading">导入</a-button>
            </a-form-item>
            <a-form-item>
              <a-button type="primary" icon="download" :loading="downloadLoading">导出</a-button>
            </a-form-item>
            <a-form-item>
              <a-button type="primary" icon="plus" @click="handleCreate">新增</a-button>
            </a-form-item>

            <!--批量删除-->
            <!--<a-form-item v-if="isAuth('sys:user:delete')">-->
            <!--<a-button type="primary" icon="delete" :disabled="selectedRowKeys.length === 0" @click="handleCreate">批量删除</a-button>-->
            <!--</a-form-item>-->

          </a-form>
        </a-card>
      </div>

      <!--列表-->
      <!--<a-table :columns="columns" :dataSource="data"-->
      <!--:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"-->
      <!--bordered size="small" rowKey="id"-->
      <!--:pagination="pagination" :loading="loading"-->
      <!--@change="getTableData"-->
      <!--&gt;--><!--多选-->
      <a-table :columns="columns" :dataSource="data"
               bordered size="small" rowKey="id"
               :pagination="pagination" :loading="loading"
               @change="getTableData"
      >
        <template slot="userStatus" slot-scope="text,record">
          <a-tag color="green" v-if="text == '0'">
            启用
          </a-tag>
          <a-tag color="red" v-if="text == '1'">
            禁用
          </a-tag>
        </template>
        <span slot="action" slot-scope="text, record">
        <template>
          <a v-if="isAuth('sys:user:role')"  href="javascript:;"  @click="handleSetRole(record)">分配角色</a>
          <a-divider type="vertical"/>
          <a v-if="isAuth('sys:user:update')"  href="javascript:;"  @click="handleUpdate(record)">修改</a>
          <a-divider type="vertical"/>
          <a href="javascript:;"  @click="showConfirm(record)">删除</a>
        </template>
      </span>
      </a-table>

      <a-modal  :maskClosable="false"
                :title="mdl.dialogTitleMap[mdl.dialogStatus]"
                :width="500"
                v-model="mdl.visible"
                @ok="mdl.dialogStatus === 'create' ? createData() : updateData()"
                :confirm-loading="modalLoading"
      >
        <a-form>
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="账号"
          >
            <a-input placeholder="" disabled v-model="mdl.formData.account"  />
          </a-form-item>

          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="密码"
          >
            <a-input placeholder="" v-model="mdl.formData.password"  />
          </a-form-item>

          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="用户姓名"
          >
            <a-input placeholder="" v-model="mdl.formData.userName"  />
          </a-form-item>

          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="部门"
          >
            <DeptTree v-model="mdl.formData.deptId"></DeptTree>
            <!--<a-input placeholder="" v-model="mdl.formData.deptId"  />-->
          </a-form-item>

          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="邮箱"
          >
            <a-input placeholder="" v-model="mdl.formData.email"  />
          </a-form-item>
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="微信号"
          >
            <a-input placeholder="" v-model="mdl.formData.wechat"  />
          </a-form-item>
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="手机号"
          >
            <a-input placeholder="" v-model="mdl.formData.tel"  />
          </a-form-item>
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="用户状态"
          >
            <a-radio-group  v-model="mdl.formData.userStatus">
              <a-radio :value="0">启用</a-radio>
              <a-radio :value="1">禁用</a-radio>
            </a-radio-group>

          </a-form-item>

        </a-form>
      </a-modal>
      <a-modal  :maskClosable="false"
                v-if="mdl_role.visible"
                title="分配角色"
                :width="500"
                v-model="mdl_role.visible"
                @ok="setRole"
      >
        <a-form>
          <a-form-item
            :labelCol="mdl.labelCol"
            :wrapperCol="mdl.wrapperCol"
            label="系统角色"
          >
            <RoleSelect v-model="mdl_role.formData.roleIds" mode="multiple"></RoleSelect>
          </a-form-item>

        </a-form>
      </a-modal>
    </a-card>
  </div>
</template>

<script>
  import moment from 'moment';
  import RoleSelect from "@/hzjComponents/select/RoleSelect"
  import DeptTree from "@/hzjComponents/treeSelect/DeptTree"
  import {companyUserBasequery,companyUserBaseup,companyUserBasedelete,companyUserBaseinsert} from '@/api/userManagement'
  const align = 'center'
  const  columns = [
    {
      title: '姓名',
      dataIndex: 'userName',
      align
    },
    {
      title: '部门',
      dataIndex: 'deptName'
    },
    {
      title: '岗位',
      dataIndex: 'job'
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      align
    },
    {
      title: '手机号',
      dataIndex: 'tel',
      align
    },
    {
      title: '系统角色',
      dataIndex: 'sysUserRoles',
      align,
      scopedSlots: { customRender: 'sysUserRoles' }

    },
    {
      title: '用户状态',
      dataIndex: 'userStatus',
      align,
      scopedSlots: { customRender: 'userStatus' }
    },
    {
      title: '操作',
      dataIndex: 'action',
      width: '350px',
      align,
      scopedSlots: { customRender: 'action' }
    }
  ]
  export default {
    components: {
      RoleSelect , DeptTree
    },
    data() {
      return {
        downloadLoading: false,
        modalLoading: false,
        /*   -------搜索框--------*/
        searchParams :{
          userName:''
        },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },

        /*   -------新增修改弹窗--------*/
        mdl: {
          dialogStatus: '',
          dialogTitleMap: {
            update: '编辑',
            create: '添加'
          },
          visible :false ,
          title:'',
          formData:{
            createTime: "",
            del: 0,
            email: "",
            id: '',
            idCard: "",
            integral: '',
            job: "",
            nickname: "",
            period: '',
            schoolName: "",
            tel: "",
            userName: '',
            userStatus: '',
            userType: 3,//0:企业用户;1:学校用户;2:个人用户;3:环保局用户
            wechat: ""
          },
        },

        /*   -------弹窗-设置角色--------*/
        mdl_role: {
          visible :false ,
          formData:{userId :'',roleIds:[]},

        },

        /*   -------弹窗-绑定 片区/供水站/服务点--------*/
        mdl_area: {
          visible :false ,
          formData:{userId :''},

        },

        /*   -------表格--------*/

        loading: false,
        columns,
        data: [],
        selectedRowKeys: [], // Check here to configure the default column
        pagination: this.$defaultSettings.pagination ,
      }
    },
    inject: ['upShow'],filters: {},
    created() {

    },
    mounted() {
      this.getTableData()
    },
    methods: {
//        多选暂未用
      onSelectChange(selectedRowKeys) {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        this.selectedRowKeys = selectedRowKeys;
      },
//      查询列表
      getTableData(pagination) {
        if(pagination!=undefined && pagination!='' && pagination!=null) {
          this.pagination = pagination
        }
        this.loading = true
        const parameter = {
          _search: true,//是否分页查询
          pageSize: this.pagination.pageSize || 10,
          pageNumber: this.pagination.current || 1,
          data: {
            createTime: "",
            del: 0,
            email: "",
            id: '',
            idCard: "",
            integral: '',
            job: "",
            nickname: "",
            period: '',
            schoolName: "",
            tel: "",
            userName: this.searchParams.userName,
            userStatus: '',
            userType: 3,//0:企业用户;1:学校用户;2:个人用户;3:环保局用户
            wechat: ""
          },
        }
        companyUserBasequery(parameter).then(res=>{
          if(res.code===200){
            this.data=res.data.records;
            this.pagination.total=res.data.total;
            this.loading = false
          }
          this.loading = false
        }).catch(()=>{
            this.loading = false
          }
        )
      },
      handleSearch(){
        this.pagination.current = 1
        this.getTableData()
      },

      setDefaults(){
        this.mdl.formData = {
          createTime: "",
          del: 0,
          email: "",
          id: '',
          idCard: "",
          integral: '',
          job: "",
          nickname: "",
          period: '',
          schoolName: "",
          tel: "",
          userName: '',
          userStatus: '',
          userType: 3,//0:企业用户;1:学校用户;2:个人用户;3:环保局用户
          wechat: ""
        }
      },
      //添加行
      handleCreate() {
        this.setDefaults()
        this.mdl.dialogStatus = 'create'
        this.mdl.visible = true
      },
      //新增数据
      createData(){
        this.modalLoading = true
        const parameter = {
          createTime: moment().format('YYYY-MM-DD HH:mm:ss'),
          del: 0,
          email: this.mdl.formData.email,
          id: '',
          idCard: this.mdl.formData.idCard,
          integral: '',
          job:this.mdl.formData.job,
          nickname: this.mdl.formData.nickname,
          period:'',
          schoolName: this.mdl.formData.schoolName,
          tel: this.mdl.formData.tel,
          userName:this.mdl.formData.userName,
          userStatus: this.mdl.formData.userStatus,
          userType: 3,//0:企业用户;1:学校用户;2:个人用户;3:环保局用户
          wechat: this.mdl.formData.wechat,
        }
        companyUserBaseinsert(parameter).then(res=>{
          this.modalLoading = false
          if (res.code === 200) {
            this.upShow(1, '用户新增成功')
            this.mdl.visible = false
            this.handleSearch()
          } else {
            this.upShow(2, res.msg || '用户新增失败')
          }
        }).catch(err => {
          this.modalLoading = false
          this.upShow(2, '用户新增失败')
        })
      },
      //编辑当前行
      handleUpdate(row) {
        this.mdl.formData = Object.assign({}, row) // copy obj
        this.mdl.dialogStatus = 'update'
        this.mdl.visible = true
      },
      //      编辑
      updateData(){
        this.modalLoading = true
        const parameter = {
          createTime: this.mdl.formData.createTime,
          del: this.mdl.formData.del,
          email: this.mdl.formData.email,
          id: this.mdl.formData.id,
          idCard: this.mdl.formData.idCard,
          integral: this.mdl.formData.integral,
          job:this.mdl.formData.job,
          nickname: this.mdl.formData.nickname,
          period:this.mdl.formData.period,
          schoolName: this.mdl.formData.schoolName,
          tel: this.mdl.formData.tel,
          userName:this.mdl.formData.userName,
          userStatus: this.mdl.formData.userStatus,
          userType: this.mdl.formData.userType,//0:企业用户;1:学校用户;2:个人用户;3:环保局用户
          wechat: this.mdl.formData.wechat,
        }
        companyUserBaseup(parameter).then(res=>{
          this.modalLoading = false
          if (res.code === 200) {
            this.upShow(1, '修改成功')
            this.mdl.visible = false
            this.handleSearch()
          } else {
            this.upShow(2, res.msg || '用户修改失败')
          }
        }).catch(err => {
          this.modalLoading = false
          this.upShow(2, '用户修改失败')
        })
      },
//      删除
      showConfirm(val) {
        var that = this
        this.$confirm({
          title: '删除用户记录?',
          content: '确定删除'+val.userName +'的记录?',
          onOk() {
            that.handleDelete(val)
          },
          onCancel() {},
        });
      },
      handleDelete(row){
        this.modalLoading = true
        companyUserBasedelete(row.id).then(res=>{
          if (res.code === 200) {
            this.modalLoading = false
            this.upShow(1, '用户删除成功')
            this.handleSearch()
          } else {
            this.modalLoading = false
            this.upShow(2, res.msg || '用户删除失败')
          }
        }).catch(err => {
          this.modalLoading = false
          this.upShow(2, '用户删除失败')
        })
      },
      //分配角色
      handleSetRole(row) {
        this.mdl_role.formData.userId = row.id
        this.mdl_role.formData.roleIds = row.roleIds
        this.mdl_role.visible = true
      },
      //设置角色
      setRole(){
        const params = {
          userId : this.mdl_role.formData.userId,
          ids : this.mdl_role.formData.roleIds
        }
        this.$axios
          .post(this.$URLMAP.url.user.roles.set, params)
          .then((response) => {
            if (response.code === 200) {
              this.upShow(1, '用户角色设置成功')
              this.mdl_role.visible = false
              this.handleSearch()
            } else {
              this.upShow(2, res.msg || '用户角色设置失败')
            }
          }).catch(err => {
          this.upShow(2, '用户角色设置接口调用失败')
        })
      },
    }
  }
</script>

<style scoped>

</style>